import 'package:flutterDemo/repository/datas/home_list_data.dart';
import 'package:flutterDemo/pages/home/home_vm.dart';
import 'package:flutterDemo/route/RouteUtils.dart';
import 'package:flutterDemo/route/routes.dart';
import 'package:flutter/material.dart';
import 'package:flutter_swiper_view/flutter_swiper_view.dart';
import 'package:provider/provider.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key}); //添加一个构造方法
  @override
  State<StatefulWidget> createState() {
    return _HomePageState();
  }
}

class _HomePageState extends State<HomePage> {
  HomeViewModel viewModel = HomeViewModel(); //初始化
  RefreshController refreshController = RefreshController();
  @override
  void initState() {
    super.initState();
    viewModel.getBanner(); //请求轮播图接口
    viewModel.initListData(false); // 第一次请求列表和置顶数据
  }

  void refreshOrLoad(bool loadMore) {
    viewModel.initListData(loadMore, callback: (loadMore) {
      if (loadMore) {
        refreshController.loadComplete(); //停止上拉加载
      } else {
        refreshController.refreshCompleted(); //停止下拉刷新
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<HomeViewModel>(
        create: (context) {
          return viewModel;
        },
        child: Scaffold(
            body: SafeArea(
                child: SmartRefresher(
          controller: refreshController,
          enablePullDown: true,
          enablePullUp: true,
          header: const ClassicHeader(),
          footer: const ClassicFooter(),
          onLoading: () {
            // 上拉加载回调
            refreshOrLoad(true);
          },
          onRefresh: () {
            // 下拉刷新回调
            viewModel.getBanner().then((value) {
              refreshOrLoad(false);
            }); //请求轮播图接口
          },
          child: SingleChildScrollView(
            child: Column(children: [_banner(), _homeListView()]),
          ),
        ))));
  }

  /// 构建轮播图组件
  ///
  /// 该方法返回一个 `Consumer` 组件，用于监听 `HomeViewModel` 的状态变化。
  /// 当 `HomeViewModel` 中的 `bannerList` 数据发生变化时，会重新构建轮播图组件。
  ///
  /// 返回值：一个 `Consumer` 组件，包含轮播图或加载中的提示。
  Widget _banner() {
    // 使用 Consumer 监听 HomeViewModel 的状态变化
    return Consumer<HomeViewModel>(builder: (context, vm, child) {
      // 返回一个固定高度和宽度的容器
      return SizedBox(
        height: 200,
        width: double.infinity,
        // 根据 bannerList 是否为空显示不同的内容
        child: vm.bannerList == null
            // 如果 bannerList 为空，显示加载中的提示
            ? const Center(child: CircularProgressIndicator())
            // 如果 bannerList 不为空，显示轮播图
            : Swiper(
                // 指示器的布局方式
                indicatorLayout: PageIndicatorLayout.COLOR,
                // 是否自动播放轮播图
                autoplay: true,
                // 添加一个指示器
                pagination: const SwiperPagination(),
                // 添加左右切换按钮
                control: const SwiperControl(),
                // 轮播图的数量
                itemCount: vm.bannerList!.length,
                // 构建每个轮播图的子组件
                itemBuilder: (context, index) {
                  return Container(
                    height: 200,
                    width: double.infinity,
                    color: Colors.lightBlue,
                    child: Image.network(
                      // 从 bannerList 中获取图片的 URL
                      vm.bannerList?[index]?.imagePath ?? "",
                      height: 200,
                      fit: BoxFit.fill,
                      // 处理图片加载失败的情况
                      errorBuilder: (context, error, stackTrace) {
                        return const Center(child: Text('图片加载失败'));
                      },
                    ),
                  );
                },
              ),
      );
    });
  }

  Widget _homeListView() {
    return Consumer<HomeViewModel>(builder: (context, vm, child) {
      return ListView.builder(
        shrinkWrap: true, //是否根据子项的总高度来设置ListView的高度
        physics: const NeverScrollableScrollPhysics(), //禁用滑动事件
        itemBuilder: (context, index) {
          return _listItemView(vm.listData?[index], index);
        },
        itemCount: vm.listData?.length ?? 0,
      );
    });
  }

  Widget _listItemView(HomeListItemData? item, int index) {
    String? name =
        item?.author!.isNotEmpty == true ? item?.author : item?.shareUser;

    return GestureDetector(
      onTap: () {
        RouteUtils.pushForNamed(context, RoutePath.webViewPage,
            arguments: {"name": "使用路由传值"});
        // Navigator.pushNamed(context, RoutePath.webViewPage,arguments: {"name": "使用路由传值2"});
      },
      child: Container(
          margin: const EdgeInsets.only(top: 5, bottom: 5, left: 10, right: 10),
          padding:
              const EdgeInsets.only(top: 15, bottom: 15, left: 10, right: 10),
          decoration: BoxDecoration(
              border: Border.all(color: Colors.black12, width: 0.5),
              borderRadius: const BorderRadius.all(Radius.circular(10))),
          child: Column(
            // 向左对齐
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                children: [
                  ClipRRect(
                    borderRadius: BorderRadius.circular(15),
                    child: Image.network(
                      "https://wx4.sinaimg.cn/mw690/9768ec68gy1hss209xassj20u00zj0wx.jpg",
                      width: 30,
                      height: 30,
                      fit: BoxFit.cover,
                    ),
                  ),
                  const SizedBox(width: 5),
                  Text(
                    name ?? "",
                    style: const TextStyle(color: Colors.black),
                  ),
                  const Expanded(child: SizedBox()), //让文本靠右
                  //增加一个右侧的padding
                  Padding(
                      //使用Padding增加一个右侧的padding
                      padding: const EdgeInsets.only(right: 5),
                      child: Text(
                        item?.niceShareDate ?? "",
                        style: const TextStyle(color: Colors.black),
                      )),
                  item?.type?.toInt() == 1
                      ? const Text(
                          "置顶",
                          style: TextStyle(
                              color: Colors.blue, fontWeight: FontWeight.bold),
                        )
                      : const SizedBox(),
                ],
              ),
              const SizedBox(
                height: 10,
              ),
              Text(
                // "标题标题标题标题标题标题标题",
                item?.title ?? "",
                style: const TextStyle(color: Colors.black, fontSize: 14),
              ),
              const SizedBox(
                height: 8,
              ),
              Row(
                children: [
                  Text(
                    item?.chapterName ?? "",
                    style: const TextStyle(
                        color: Color.fromARGB(255, 112, 201, 116),
                        fontSize: 12),
                  ),
                  const Expanded(child: SizedBox()),
                  GestureDetector(
                      onTap: () {
                        bool isCollect = item?.collect == true ? false : true;
                        viewModel.collectOrNo(isCollect, "${item?.id}", index);
                      },
                      child: Image.asset(
                        item?.collect == true
                            ? "assets/images/img_collect.png"
                            : "assets/images/img_collect_grey.png",
                        width: 30,
                        height: 30,
                      ))
                ],
              )
            ],
          )),
    );
  }
}
